<template>
  <div class="mainer">
    <a-page-header
      style="border: 1px solid rgb(235, 237, 240)"
      title="申论"
      sub-title="申论技巧"
      @back="() => $router.go(-1)"
    />

    <div
      class="right-list"
      v-for="item in explainListStore.explaindemo"
      :key="item.iid"
      @click="bounceToDetail(item.iid)"
    >
      <div class="img">
        <img :src="item.image" alt="" />
      </div>
      <div class="paper">
        <h3>{{ item.title }}</h3>
        <p>{{ item.content }}</p>
      </div>
    </div>

    <div class="demo-pagination-block">
      <a-pagination
        v-model:current="currentPage"
        :pageSize="pageSize"
        :total="explainListStore.total"
        show-less-items
        @showSizeChange="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import { useExplainListStore } from '@/stores/explain/explainlist'
import { useRouter, useRoute } from 'vue-router'

// const navData = reactive([] as any[])
const explainListStore = useExplainListStore()

const currentPage = ref(1)
const pageSize = ref(5)
const handleCurrentChange = (currentPage: number, pageSize: number) => {
  console.log(currentPage, pageSize, '0000000000')
}
watch(pageSize, () => {
  console.log('pageSize', pageSize.value)
})
watch(currentPage, () => {
  console.log('current', currentPage.value)
  feachPage()
})

feachPage()

// function handleSizeChange() {
//   feachPage()
// }
// function handleCurrentChange() {
//   console.log('现在的页面改变')
//   feachPage()
// }

function feachPage(formData: any = {}) {
  //1.获取offset/size/ page,limit,
  const pagesize = pageSize.value //绑定每页数量，有5,10,15选项
  const currentpage = currentPage.value

  const limit = (currentpage - 1) * pagesize //跳过多少条，第一页跳过0条，第二页跳过5条
  //   console.log(currentpage, '11111')
  const pageInfo = { currentpage, pagesize }
  //   const searchInfo = { ...pageInfo, ...formData }
  //   console.log(searchInfo, '0000')
  // 2.发起网络请求
  explainListStore.explainResultAction(pageInfo)
}

//跳转到详情页

const router = useRouter()
const route = useRoute()
const iid = route.params.iid

// console.log(router.params, '33333')

function bounceToDetail(iid: number) {
  router.push({
    path: `/explaindetail/${iid}`,
  })
}

//暴露出去网络请求
defineExpose({ feachPage })
</script>

<style lang="less" scoped>
.right-list {
  height: 180px;
  display: flex;
  border-bottom: 1px solid#eee;
  // padding-top: 50px;
  .img img {
    display: block;
    width: 250px;
    border: 1px solid #eee;
  }
  .paper {
    height: 180px;
   padding-top: 45px;
    margin-left: 15px;
    margin-right: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    h3 {
      font-size: 34px;
      font-weight: bold;

      margin-bottom: 10px;
    }
    p {
      font-size: 24px;
    }
  }
}
.demo-pagination-block {
  margin-top: 20px;
}
</style>
